(function () {
    // 属性
    const handleAttributes = (dom)=>{
        let obj = {}
        Array.from(dom.attributes).forEach(attr=>{
            obj[attr.name] = attr.value
        })
        return obj
    }
    // 子节点
    const handleChildNodes = (dom,component)=>{
        let list = []
        Array.from(dom.childNodes).forEach(child=>{
            switch (child.nodeType) {
                case document.ELEMENT_NODE:
                    list.push(new VElement(child,component))
                    break;
                case document.TEXT_NODE:
                    const vText = new VText(child,component);
                    if( vText._data ){
                        list.push(vText)
                    }
                    break;
                default:
                    console.log(`未编译节点：${child.nodeName}`)
                    break;
            }
        })
        return list;
    }
    // 指令 {name:"",arg:"",value:""}
    const handleDirective = (directive)=>{
        let _directive = []
        for (let key in directive) {
            if( key.startsWith('z-') ){
                const [name,arg] = key.split(":")
                _directive.push({
                    name,
                    arg,
                    value:directive[key]
                })
            }else if( key.startsWith(':') ){
                _directive.push({
                    name:"z-bind",
                    arg:key.substring(1),
                    value:directive[key]
                })
            }else if( key.startsWith('+') ){
                _directive.push({
                    name:'on',
                    arg:key.substring(1),
                    value:directive[key]
                })
            }
        }
        return _directive
    }
    // 处理事件
    const handleListener = (directive)=>{
        return  directive.filter(e=> e.name === 'on')
    }
    window.VElement = class VElement extends VNode{
        constructor(dom,component) {
            super(dom)
            this._component = component || this;
            this._type = dom.nodeName.toLowerCase()
            this._attrs = handleAttributes(dom) // 属性
            this._children = handleChildNodes(dom,component) // 子元素
            // 指令
            this._directive = handleDirective(this._attrs)
            // 事件
            this._listeners = handleListener(this._directive)
        }
        render(){

        }
    }
})()